<template>
   <div>
        <!-- 头部导航 -->
        <van-nav-bar title="登录"  class='navbar'/>

        <!-- 手机号/验证码表单 -->
        <van-form @submit="onSubmit" class="form" ref="form">
          <van-field
            v-model="mobile"
            name="mobile"
            placeholder="输入手机号"
            :rules="mobileRules"
          >
        <template #label>
            <span class="toutiao toutiao-shouji"></span> 
        </template>
        </van-field>
          <van-field
            v-model="code"
            name="code"
            placeholder="请输入验证码"
            :rules="codeRules"
          >
          <template #label>
            <span class="toutiao toutiao-yanzhengma"></span>
         </template>

         <template #button>
            <van-button 
            v-if="isShowCodeBtn"
            @click="getCode"
            native-type="button" 
            type="default" 
            class="code-btn" 
            round 
            size="small">
            获取验证码</van-button>
          <!-- 显示倒计时 功能 -->
            <van-count-down 
            v-else
            :time="3 * 1000" 
            format="ss秒"
            @finish="isShowCodeBtn = true"
            />

         </template>

        </van-field>
          <div style="margin: 16px;">
            <van-button  block type="info" native-type="submit">登录</van-button>
          </div>
</van-form>
   </div>
</template>

<script>
//引入API
//import { loginAPI } from '@/api/user'
import { loginAPI , getCodeAPI } from '@/api'

import { mapMutations } from 'vuex'

export default {
  data() {
 //只有data函数的对象里有的东西
    const mobileRules = [
        {required: true, message: '输入手机号' , trigger:'onChange'},
        {
           pattern:
           /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
           message:'手机号格式错误',
           trigger:'onChange'
        }
    ]

    const codeRules = [
        {required: true, message: '请输入验证码'},
        {pattern: /^[0-9]{6}$/, message:'请输入6位验证码'}
    ]

    return {
      mobile: '',
      code: '',
      mobileRules,
      codeRules,
      isShowCodeBtn:true,
    };
  },
  methods: {
    ...mapMutations(['SET_TOKEN']),

    async onSubmit() {
      //登录的逻辑
      //1. 表单效验
      //2.发送请求给后端
     // 下载 yarn add axios
      const { code, mobile } = this
    //   console.log(code, mobile)

    this.$toast.loading({
        message:'加载中>>>',
        forbidClick: true
    })

    try{
        const { data } = await loginAPI(mobile,code)
        this.SET_TOKEN(data.data)
        
        this.$router.push('./profile')

        this.$toast.success('登入成功')
    } catch (error) {
        // this.$toast.fail('登录失败')

        //区分js导致的错误还是 axios导致的错误
        //axios封装的错误对象
        // - 对象.response

        //if(error.response && error.response.status === 400) 下面那个是es11新语法
        if(error.response?.status === 400){
             //axios导致错误
             this.$toast.fail(error.response.data.message)
        } else {
            //js导致错误, 507  服务器崩了
            throw error
        }
    }
    //   const res = await loginAPI(mobile, code)
    //   console.log(res)
    },

    async getCode() {
        //1.给form表单绑定ref
        await this.$refs.form.validate('mobile')

        //2.显示倒计时
        this.isShowCodeBtn = false

        //3.提示loading
        this.$toast.loading({
            message:'发送验证码中>>>',
            forbidClick: true
        })

        //4.发送验证码
        try {
            await getCodeAPI(this.mobile)
            this.$toast.success('发送验证码成功')

        } catch (error) {
            if(error.response?.status === 429){
                //频繁发送验证码
                this.$toast.fail(error.response.data.message)
            }
        }
    }

  },


};
</script>

<style scoped lang="less">
//scoped作用 样式只能对当前组件使用
// vue-cli提供语法 :deep()
.navbar {
    background-color: #3296fa;
    :deep(.van-nav-bar__title){
        color: #fff;
    }
}

:deep(.form){
    .toutiao {
        font-size: 40px;
    }

    .van-field__label{
        flex:1;
    }
    .van-field__value {
        flex:20;
    }
}

.code-btn {
    background-color: #eee;
    color:#9a8b7e;
    height: 0.6rem;
}
</style>